<template>
	<view>
		<navbar :tip="tip" title="帮我选校" :isback="true"></navbar>
		<scroll-view scroll-y="true" class="sc"
			:style="{height:'calc(100vh - 44px - '+height+' - '+bheight+' - '+(tip?'64rpx':'0rpx')+')'}">
			<view class="box">
				<view class="box__con" :style="{minHeight:'calc(100vh - 44px - 40rpx - '+height+' - '+bheight+' - '+(tip?'64rpx':'0rpx')+')'}">
					<view class="box__con__top">
						<view class="box__con__top__jd">
							<view class="box__con__top__jd__active" :style="{width:((((cur+1)<7?(cur+1):7)/7)*100)+'%'}">

							</view>

						</view>
						<view class="box__con__top__num">
							{{(cur+1)<7?(cur+1):7}}/7
						</view>
					</view>
					<view class="box__con__list">
						<view class="" style="padding: 0 14rpx;">
							<view class="" v-for="(item,index) in list" :key="index">
								<view class="box__con__list__item" v-if="item.inp==0&&cur>=index">
									<view class="u-flex u-flex-y-center"
										style="border-bottom: 2rpx solid #E4E4E4;height: 124rpx;" :class="item.yx?'':'bb0'">
										<view class="box__con__list__item__label">
											{{item.name}}
										</view>
										<view class="u-flex u-flex-y-center" v-if='item.val'>
											<view class="box__con__list__item__value">
												{{item.val?item.val:item.pl}}
											</view>
											<view class="box__con__list__item__edit" @click="clickedit(item)">
												修改
											</view>
										</view>
									</view>
									<!-- 选项 -->
									<view class="box__con__list__xx" v-if="!item.yx">
										<view class="box__con__list__xx__item" v-for="(item1,index1) in item.xx"
											:key="index1" :class="index1==item.xxindex?'active':''"
											:style="{width:index>0?'100%':'300rpx'}"
											@click="clickcheck(item1,index,index1)">
											{{item1.name}}
										</view>
									</view>
								</view>
								<view class="box__con__list__item1" v-if="item.inp==1&&cur>=2">
									<view class="box__con__list__item1__label">
										{{item.name}}
									</view>
									<input :type="item.type" class="box__con__list__item1__inp" :placeholder="item.placeholder"
										v-model="item.val" @blur="blur(item,index)" />
									<view class="box__con__list__item1__line">
								
									</view>
								</view>
							</view>
						</view>
						
						<u-button :customStyle="{
							height:'76.34rpx',
							fontSize:'30rpx',
							width:'578.24rpx',
							color:'#00456A',
							marginTop:'47rpx',
							marginLeft:'32rpx'
						}" color="#93d8ff" shape='circle' @click="submit()" :disabled="cur!=list.length">提交</u-button>
					</view>
				</view>
			</view>
		</scroll-view>
		<u-popup :show="show" mode='center' bgColor='transparent'>
			<view class="popbox">
				<view class="popbox__bg">
					<image src="/static/bwx/Ellipse_6.png" class="popbox__bg__icon" mode=""></image>
					<image src="/static/bwx/Vector 2.png" class="popbox__bg__icon1" mode=""></image>

				</view>
				<view class="popbox__title">
					提交成功
				</view>
				<view class="popbox__tip">
					等待老师联系
				</view>
				<view class="popbox__tip2">
					学途进阶，志展鸿图
				</view>
				<u-button :customStyle="{
					height:'76.34rpx',
					fontSize:'30rpx',
					width:'349.24rpx',
					color:'#00456A',
					margin:'0',
				}" color="#93d8ff" shape='circle' @click="show=false,navtosw('/pages/tabbar/xschool')">确定</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import home from '@/api/_home.js'
	export default {
		data() {
			return {
				show: false,
				tip: '本表信息为你严格保密，请如实填写',
				list: [{
						name: '文化水平',
						key: 'culture',
						val: '',
						xx: [],
						yx: false,
						xxindex: null,
						inp:0
					},
					{
						name: '意向读书城市',
						key: 'intended_city',
						val: '',
						xx: [],
						yx: false,
						xxindex: null,
						inp:0
					},
					// 初三学校与地址
					{
						name: '初三学校与地址',
						type: 'text',
						val: '',
						placeholder: '请输入初三学校与地址',
						key: 'school_address',
						max: -1,
						inp:1
					},
					{
						name: '姓名',
						type: 'text',
						val: '',
						placeholder: '请输入姓名',
						key: 'name',
						max: -1,
						inp:1
					},
					{
						name: '手机号',
						type: 'number',
						val: '',
						placeholder: '请输入手机号',
						key: 'phone',
						max: 11,
						inp:1
					},
					{
						name: '意向学校',
						type: 'text',
						val: '',
						placeholder: '请输入意向学校',
						key: 'school_name',
						max: -1,
						inp:1
					},
					{
						name: '留言',
						type: 'text',
						val: '',
						placeholder: '请输入留言',
						key: 'message',
						max: -1,
						inp:1
					},
				],
				cur: 0,
				curindex: null
			};
		},
		computed: {
			height() {
				const height = `calc(${uni.$u.addUnit(uni.$u.sys().statusBarHeight, 'px')})`
				return uni.$u.deepMerge(height)
			},
			bheight() {
				const height = uni.$u.addUnit(uni.$u.sys().safeAreaInsets.bottom, 'px');
				return uni.$u.deepMerge(height)
			},
		},
		methods: {
			clickcheck(item, index, i) {
				this.list[index].xxindex = i
				this.list[index].val = item.name
				this.list[index].yx = true
				this.getcount()
				this.$forceUpdate()
			},
			async getlist(name){
				let res = await home.config({name})
				if(res.data.code==200){
					if(name=='culture'){
						res.data.data.map(t=>{
							this.list[0].xx.push({
								name:t
							})
						})
						
					}
					if(name=='intended_city'){
						res.data.data.map(t=>{
							this.list[1].xx.push({
								name:t
							})
						})
					}
				}
				
			},
			clickedit(item){
				item.yx=false
				this.$forceUpdate()
			},
			getcount() {
				let count = 0
				this.list.map(t => {
					if (t.yx) {
						count++
					}
				})
				this.cur = count
			},
			blur(item,index){
				if(item.val){
					this.list[index].yx = true
					this.getcount()
					this.$forceUpdate()
				}
				
			},
			async submit(){
				const obj = {};
				this.list.map(t=>{
					obj[t.key]=t.val
				})
				let res = await home.helpadd(obj)
				if(res.data.code==200){
					this.show=true
				}
				console.log(obj); // { '1': 1, '2': 2, '3': 3 }
			}
		},
		onLoad() {
			this.getlist('culture')
			this.getlist('intended_city')
		}
	}
</script>

<style lang="scss">
	page {
		background: url('https://mp-b54a63ff-3ce2-4df8-8d6e-f855d8976d34.cdn.bspapp.com/img/Rectangle_106.png') 100% no-repeat;
		background-position: top;
		width: 750rpx;
	}

	.box {
		padding: 0 24rpx;

		// overflow: hidden;
		&__con {
			padding-bottom: 40rpx;
			background: #FFFFFF;
			border-radius: 38rpx 38rpx 0rpx 0rpx;

			// overflow: hidden;
			&__top {
				height: 80rpx;
				display: flex;
				align-items: center;
				position: relative;
				padding: 0 22rpx 0 34rpx;
				border-radius: 38rpx;

				&__jd {
					width: 100%;
					height: 24rpx;
					background: #D8D8D8;
					border-radius: 15rpx 15rpx 15rpx 15rpx;

					&__active {
						background: #84B1FF;
						height: 24rpx;
						border-radius: 15rpx 15rpx 15rpx 15rpx;
					}
				}

				&__num {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 19rpx;
					color: #FFFFFF;
					line-height: 80rpx;
					position: absolute;
					top: 0;
					right: 43rpx;
				}
			}

			&__list {
				padding: 0 24rpx;

				&__item {
					padding: 0 20rpx 0 0;

					&__label {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 31rpx;
						color: #000000;
						flex: 1;
					}

					&__value {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 31rpx;
						color: #636363;

						text-align: right;
					}

					&__edit {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 27rpx;
						color: #6492FF;
						margin-left: 30rpx;
					}
				}

				&__xx {
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;

					&__item {
						width: 300rpx;
						height: 84rpx;
						background: #E8F7FF;
						border-radius: 23rpx 23rpx 23rpx 23rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 31rpx;
						color: #747474;
						line-height: 40rpx;
						margin-bottom: 20rpx;
					}

					.active {
						background: #84b1ff;
						color: #fff;
					}
				}

				&__item1 {
					padding: 44rpx 0 0;

					&__label {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 31rpx;
						color: #000000;
						line-height: 31rpx;
						margin-bottom: 30rpx;
						padding-left: 14rpx;
					}

					&__inp {
						height: 73rpx;
						background: #E8F7FF;
						border-radius: 23rpx 23rpx 23rpx 23rpx;
						padding: 0 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 27rpx;
						color: #333;
						line-height: 40rpx;
					}

					&__line {
						width: 620.23rpx;
						height: 2rpx;
						background-color: #E4E4E4;
						margin-top: 28rpx;
						margin-left: 14rpx;
					}
				}
			}
		}
	}

	.popbox {
		width: 489rpx;
		height: 578rpx;
		background: linear-gradient(322deg, #FFFFFF 0%, #E3FFF9 38%, #D7ECFF 85%);
		box-shadow: 11rpx 15rpx 11rpx -2rpx rgba(0, 0, 0, 0.25);
		border-radius: 57rpx 57rpx 57rpx 57rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		&__bg {
			width: 148.85rpx;
			height: 148.85rpx;
			position: relative;
			margin-top: 70rpx;
			box-shadow: 0rpx 12rpx 26rpx 6rpx #7fcde2;
			border-radius: 50%;
			overflow: hidden;

			&__icon {
				width: 148.85rpx;
				height: 148.85rpx;
				position: absolute;
				top: 0;
				left: 0;
			}

			&__icon1 {
				width: 78.24rpx;
				height: 66.79rpx;
				position: absolute;
				left: 38rpx;
				top: 44rpx;
			}
		}

		&__title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 38rpx;
			color: #576E7A;
			line-height: 48rpx;
			margin-top: 50rpx;
		}

		&__tip {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #576E7A;
			line-height: 48rpx;
		}

		&__tip2 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 27rpx;
			color: #5C98FF;
			line-height: 48rpx;
			margin-top: 40rpx;
			margin-bottom: 10rpx;
		}
	}

	.bb0 {
		border-bottom: 0 !important;
	}
</style>